一个基于vue功能强大的表格组件 | 您所在的位置:网站首页 › react-table 扩展行 › 一个基于vue功能强大的表格组件 |
官网地址: vxetable.cn/#/table/sta… 页面效果: 基础使用一个基于 vue 的 PC 端表格组件,支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、模态窗口、自定义模板、渲染器、贼灵活的配置项、扩展接口等… 介绍下使用方法 HMTL部分 居左 居中 居右 javascript部分 export default { data () { return { gridOptions1: { border: true, resizable: true, showOverflow: true, height: 300, align: 'left', toolbarConfig: { slots: { // 自定义工具栏模板 buttons: 'toolbar_buttons' } }, columns: [ { type: 'seq', width: 50 }, { field: 'name', title: 'Name' }, { field: 'sex', title: 'Sex', showHeaderOverflow: true }, { field: 'address', title: 'Address', showOverflow: true } ], data: [ { id: 10001, name: 'Test1', nickname: 'T1', role: 'Develop', sex: 'Man', age: 0, address: 'Shenzhen' }, { id: 10002, name: 'Test2', nickname: 'T2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' }, { id: 10003, name: 'Test3', nickname: 'T3', role: 'PM', sex: 'Man', age: 100, address: 'Shanghai' }, { id: 10004, name: 'Test4', nickname: 'T4', role: 'Designer', sex: 'Women', age: 70, address: 'Shenzhen' }, { id: 10005, name: 'Test5', nickname: 'T5', role: 'Develop', sex: 'Women', age: 10, address: 'Shanghai' }, { id: 10006, name: 'Test6', nickname: 'T6', role: 'Designer', sex: 'Women', age: 90, address: 'Shenzhen' }, { id: 10007, name: 'Test7', nickname: 'T7', role: 'Test', sex: 'Man', age: 5, address: 'Shenzhen' }, { id: 10008, name: 'Test8', nickname: 'T8', role: 'Develop', sex: 'Man', age: 80, address: 'Shenzhen' } ] } } } } 接下来,进行二次封装首先,在项目/components下,新建/vxe-table 封装table.vue文件中代码 import '@/components/vxeTable/renderer.js' export default { name: 'Table', props: { loading: { type: Boolean, default: false }, height: { type: String || Number, default: () => { return 'auto' } }, stripe: { type: Boolean, default: true }, border: { type: String, default: 'full' }, align: { type: String, default: 'center' }, showOverflow: { type: String, default: () => { } }, showHeader: { type: Boolean, default: true }, showFooter: { type: Boolean, default: false }, toolbarConfig: { type: Object, default: () => { } }, size: { type: String, default: () => { } }, tablePage: { type: Object, default: () => { return { showPage: false, pageIndex: 1, pageSize: 10, total: 0 } } }, columns: { type: Array, default: () => { return [] } }, data: { type: Array, default: () => { return [] } }, treeConfig: { type: Object, default: undefined }, // 可编辑配置项 editConfig: { type: Object, default: () => { return { enabled: false, trigger: 'click', mode: 'row', beforeEditMethod: true } } }, // 复选框配置项 checkboxConfig: { type: Object, default: () => { return { highlight: true, range: true, trigger: 'default' } } }, // 右键快捷菜单配置 tableMenu: { type: Object, default: () => { return {} } }, // 表尾方法 footerMethod: { type: Function, default: () => { return [] } } }, data() { return { // 导出配置项 exportConfig: { // 默认选中类型 type: 'xlsx', // 局部自定义类型 types: ['xlsx', 'csv'], // 自定义数据量列表 modes: ['current', 'selected', 'all'], filename: '', sheetName: '', isFooter: true, isHeader: true, isMerge: true, isColgroup: true }, filterConfig: { remote: false }, // 打印配置项 printConfig: { mode: 'current', modes: ['current'], sheetName: '', isHeader: true, isColgroup: true, isFooter: true }, // 单选框配置项 radioConfig: { highlight: true, strict: false, trigger: 'row' } } }, methods: { // 分页改变触发事件 handlePageChange({ currentPage, pageSize }) { this.tablePage.pageIndex = currentPage this.tablePage.pageSize = pageSize this.$emit('pageChange', { pageIndex: currentPage, pageSize }) }, // 单元格点击事件 rowClick({ row, rowIndex, columnIndex, column }) { Object.defineProperty(row, 'rowIndex', { // 给每一行添加不可枚举属性rowIndex来标识当前行 value: rowIndex, writable: true, enumerable: false }) // 筛除多选时单击触发操作 if (!column.property) { return } this.$emit('rowClick', { row, rowIndex, columnIndex }) }, // 单元格双击事件 rowdblClick({ row, rowIndex, column }) { // 筛除多选时单击触发操作 if (!column.property) { return } this.$emit('rowdblClick', { row, rowIndex }) }, // 右键点击单元格菜单 menuClick({ menu, row, column }) { this.$emit('menuClick', { menu, row, column }) }, // 获取表格数据集(包括插入的临时数据) getRecordset() { return this.$refs.xTable.getRecordset() }, // 获取当前选中的行数据(用于单选框) getRadioRecord() { return this.$refs.xTable.getRadioRecord() }, // 删除复选框选中的行数据 removeCheckboxRow() { return this.$refs.xTable.removeCheckboxRow() }, // 获取当前已选中的行数据(用于复选框) getCheckboxRecords() { return this.$refs.xTable.getCheckboxRecords() }, // 只对 edit-config 配置时有效,单元格编辑状态下被关闭时会触发该事件 editClosed(row, rowIndex, column) { this.$emit('editClosed', row, rowIndex, column) } // 多选操作勾选某行 // setCheckboxRow(rows, checked) { // if (rows.length === 0) { // 清除全部多选选择 // this.$refs.xTable.clearCheckboxRow() // } else { // this.$refs.xTable.setCheckboxRow(rows, checked) // } // } // // 表格尾部 // sumNum(list, field) { // let count = 0 // let num = 0 // list.forEach(item => { // count += Number(item[field]) // num = count.toFixed(0) // }) // return num // }, // meanNum(list, field) { // let count = 0 // list.forEach(item => { // count += Number(item[field]) // }) // return (count / list.length).toFixed(2) // }, // // 表格尾部总计 // footerMethod({ columns, data }) { // // return this.footerData // const sums = [] // columns.forEach((column, columnIndex) => { // if (columnIndex === 0) { // sums.push('总') // } else { // let sumCell = null // switch (column.property) { // case 'stCount': // case 'Sales': // case 'Trans': // case 'lstCount': // case 'lSales': // case 'lTrans': // sumCell = this.sumNum(data, column.property) // break // case 'AC': // case 'lAC': // sumCell = this.meanNum(data, column.property) // break // } // sums.push(sumCell) // } // }) // // 返回一个二维数组的表尾合计 // return [sums] // } } } .my-menus { background-color: #ffffff; } .my-menus .vxe-ctxmenu--link { width: 300px; } .my-copy-item { font-weight: 700; font-style: oblique; } /deep/ .vxe-table--render-default .vxe-body--row.row--current { background: #fff3e0; } /deep/ .vxe-toolbar { padding: 0 15px; .vxe-buttons--wrapper { .vxe-button:not(.is--disabled):hover { color: #82bdf8; } } }rederer.js代码 import SelcetFilter from './component/selcetFilter.vue' import SelectContent from './component/selectContent.vue' import DataFilter from './component/dataFilter.vue' import Vue from 'vue' Vue.component('SelcetFilter', SelcetFilter) Vue.component('SelectContent', SelectContent) Vue.component('DataFilter', DataFilter) // 创建支持列内容的筛选渲染器 VXETable.renderer.add('SelcetFilter', { // 不显示底部按钮,使用自定义的按钮 isFooter: false, // 筛选模板 renderFilter(h, renderOpts, params) { return [ ] }, // 重置数据方法 filterResetMethod({ options }) { options.forEach(option => { option.data = { vals: [], sVal: '' } }) }, // 筛选数据方法 filterMethod({ option, row, column }) { const { vals } = option.data const cellValue = row[column.field] return vals.includes(cellValue) } }) // 创建支持列内容的筛选渲染器 VXETable.renderer.add('DataFilter', { // 不显示底部按钮,使用自定义的按钮 isFooter: false, // 筛选模板 renderFilter(h, renderOpts, params) { return [ ] }, // 重置数据方法 filterResetMethod({ options }) { options.forEach(option => { option.data = { vals: [], sVal: '' } }) }, // 筛选数据方法 filterMethod({ option, row, column }) { const { vals } = option.data const cellValue = row[column.field] return vals.includes(cellValue) } }) // 创建element-select下拉框的可编辑渲染器 VXETable.renderer.add('SelectContent', { // 可编辑模板 renderEdit(h, renderOpts, params) { return [ ] } // 可编辑显示模板 // renderCell(h, renderOpts, params) { // const {row, column} = params // return [ // { row[column.field] } // ] // } }) dataFilter.vue代码 export default { name: 'DataFilter', props: { params: Object }, inject: { getTableData: { value: ' getTableData', default: null } }, data() { return { value1: '' } }, methods: { dataChage(val) { console.log('%c [ val ]-31', 'font-size:13px; background:pink; color:#bf2c9f;', val) } } } |
CopyRight 2018-2019 实验室设备网 版权所有 |